<template>
  <div class="search-div">
    <el-input
      style="width: 100%;"
      placeholder="搜索地点"
      class="search-input input-with-select"
      v-model="searchKey"
      clearable
      :trigger-on-focus="false"
      @select="handleSelect"
      @input="changeSearchList(select)"
      @focus="focus"
      @keyup.enter.native="searchKeyWord(select)"
    >
      <el-select
        v-model="select"
        slot="prepend"
        @change="selectChange"
        placeholder="请选择"
      >
        <el-option
          label="地名搜索"
          value="1"
        ></el-option>
        <el-option
          label="地理编码查询"
          value="2"
        ></el-option>
        <el-option
          label="行政区划"
          value="3"
        ></el-option>
      </el-select>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="searchKeyWord(select)"
      ></el-button>
    </el-input>
    <div
      class="search-list"
      :style="{ height: listDivHeight + 'px' }"
      id="search-list"
      v-show="searchListVisiable"
    >
      <ul class="search-list-ul">
        <li
          v-for="item in searchList"
          :key="item.hotPointID"
        >
          <el-link
            :underline="false"
            @click="createMarker(item)"
          >
            <i class="el-icon-location-information"></i>
            {{ item.name }}
          </el-link>
          <br />
          <span style="font-size: 12px;vertical-align: bottom;">地址: {{ item.address }}</span>
          <el-divider></el-divider>
        </li>
      </ul>
    </div>

    <!-- 自定义折叠面板 -->
    <collapse-panel
      ref="CollapsePanel"
      v-if="collapsePanelShow"
      @panelStatus="panelStatus"
      @mounted="handleContent"
    >
      <!-- 地理编码查询详情 -->
      <el-descriptions
        title="详情"
        slot="body-content"
        id="description-content"
        v-if="select === '2'"
        :column="1"
      >
        <el-descriptions-item label="检索关键字">{{ this.searchDetail.location.keyWord }}</el-descriptions-item>
        <el-descriptions-item label="经纬度">{{ this.searchDetail.location.lon}} &nbsp; {{ this.searchDetail.location.lat }}</el-descriptions-item>
        <el-descriptions-item label="类别">{{ this.searchDetail.location.level }}</el-descriptions-item>
      </el-descriptions>
      <!-- 行政区划详情 -->
      <el-descriptions
        title="详情"
        slot="body-content"
        id="description-content"
        v-else
        :column="1"
      >
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      </el-descriptions>
    </collapse-panel>
  </div>
</template>

<script>
import CollapsePanel from '@/components/CollapsePanel.vue';

export default {
  components: {
    CollapsePanel
  },
  props: {
    localSearch: {
      type: Object,
      default: null
    },
    geocoder: {
      type: Object,
      default: null
    },
    // administrative: {
    //   type: Object,
    //   default: null
    // }
  },
  data () {
    return {
      searchKey: null,
      restaurants: [],
      listDivHeight: window.innerHeight - 180,
      searchList: null,
      count: 10,
      searchListVisiable: false,
      select: '3',
      administrative: null,
      // 折叠面板是否可见
      collapsePanelShow: false,
      searchDetail: null
    }
  },
  methods: {
    // 初始化搜索组件，设置检索结束后的回调函数
    initLocalSearch () {
      if (this.localSearch) {
        this.localSearch.setSearchCompleteCallback(this.searchCompleteCallback);
      }
    },
    searchKeyWord (select) {
      switch (select) {
        case '1':
          this.collapsePanelShow = false;
          if (this.searchKey && this.searchKey.length > 0) {
            this.localSearch.search(this.searchKey, 1);
          } else {
            this.searchList = null;
            this.searchListVisiable = false;
            this.$emit('clearMarkers');
          }
          break;
        case '2':
          this.collapsePanelShow = true;
          this.$emit('handleGeocoder', this.searchKey);
          this.$nextTick(() => {
            if (this.$refs.CollapsePanel) {
              this.$refs.CollapsePanel.controlPanl('expand');
            }
          });
          break;
        case '3':
          this.collapsePanelShow = true;
          this.$nextTick(() => {
            this.$refs.CollapsePanel.controlPanl('expand');
          })
          this.searchGovernment();
          break;
        default:
          break;
      }

    },
    handleSelect (item) {
    },
    // 检索结束后的回调函数
    searchCompleteCallback (result) {
      console.log('回调结果', result);
      this.searchList = result.getPois();
      this.$emit('getResults', result.getPois());
      if (this.searchList) {
        this.searchListVisiable = true;
        console.log(this.searchListVisiable)
        this.computeListDivHeight();
      } else {
        this.searchListVisiable = false;
      }
    },
    changeSearchList (select) {
      this.computeListDivHeight();
      switch (select) {
        case 1:
          this.searchKeyWord('1');
          break;
        // case 2:
        //   break;
        case 3:
          this.searchKeyWord('3');
          break;
        default:
          break;
      }

    },
    selectChange () {
      this.searchListVisiable = false;
      this.collapsePanelShow = false;
    },
    load () {
    },
    // 行政区划、地理编码查询时展开详情面板
    // 地理编码查询
    searchName () {
    },
    // 地理编码查询回调函数
    searchResult (result) {

    },
    // 行政区划
    searchGovernment () {
      // 行政区划对象
      this.administrative = new T.AdministrativeDivision();
      var config = {
        needSubInfo: false,
        needAll: false,
        needPolygon: true,
        needPre: true,
        searchType: 1,
        searchWord: this.searchKey
      };
      this.administrative.search(config, this.searchGovernmentResult);
    },
    // 行政区划检索后回调函数
    searchGovernmentResult (result) {
      if (result.getStatus() == 100) {
        var data = result.getData();
        this.$emit('governmentResult', data)
        console.log('行政区划数据:', data);
      }
      else {
        result.getMsg();
      }
    },
    computeListDivHeight () {
      var div = document.getElementById('search-list');
      if (div) {
        if (window.innerHeight > 240) {
          div.style.height = window.innerHeight - 180 + 'px';
          return;
        }
        div.style.height = '60px';
      }

    },
    createMarker (item) {
      this.$emit('selectPoint', item);
      this.searchKey = item.name;
      this.searchListVisiable = false;
    },
    focus () {
      if (this.searchKey && this.searchKey.length > 0 && this.searchList) {
        this.searchListVisiable = true;
      }
    },
    panelStatus (val) {
      var div = document.getElementById('description-content');
      if (val === 'expand') {
        div.style.display = '';
      } else {
        div.style.display = 'none';
      }
    },
    // 设置searchDetail
    setSearchDetail (val) {
      console.log('地理编码检索结果', val)
      this.$nextTick(() => {
        this.searchDetail = val;
      })

    },
    // 下拉面板加载完成，处理数据
    handleContent () {
      if (this.select === '2' ) {
        this.$nextTick(() => {
          this.$refs.CollapsePanel.controlPanl('expand');
        });
      }

    }
  },
  created () {
    this.$nextTick(() => {
      this.initLocalSearch();
      console.log(this.localSearch);
    });
  },
  mounted () {
    window.onresize = () => {
      this.computeListDivHeight();
    }
  },
  computed: {
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped>
.search-div {
  position: relative;
  z-index: 999;
  width: 450px;
  top: 30px;
  left: 30px;
  opacity: 0.9;
}

.search-list {
  position: absolute;
  width: 100%;
  z-index: 999;
  background-color: white;
  line-height: 30px;
  overflow-y: auto;
  overflow-x: hidden;
}

.search-list > ul > li {
  list-style-type: none;
  padding-right: 20px;
}

.search-list > .search-list-ul {
  text-align: left;
  width: 340px;
  padding-left: 15px;

  a {
    text-decoration: none;
  }
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 6px 0;
}

.search-div .el-select {
  width: 130px;
}

.geometry-info {
  position: relative;
  z-index: 999;
  width: 450px;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white;
}

.el-descriptions {
  padding: 8px;
}
</style>